<script setup>
import { ref, defineProps, defineEmits } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import lang from './lang.vue'
import { useI18n } from 'vue-i18n'
import { useIndexStore } from '@/store'
import tg from '@/assets/icon/public/tg.png'
import twitter from '@/assets/icon/public/twitter.png'
import github from '@/assets/icon/public/github.png'
import logo from '@/assets/icon/public/logo.png'
import en from '@/assets/icon/en.png'
import zh from '@/assets/icon/zh.png'
import ztwh from '@/assets/icon/tw.png'
import { formatEthereumAddress } from '@/utils'
const emit = defineEmits(['connectWallet'])
defineProps({
  theme: {
    type: String,
    default: 'light' //'dark' // light
  }
})
const { t } = useI18n()
const store = useIndexStore()
let langRef = ref(null)
let show = ref(false)
const openOrCloseEnd = ref(false)
const router = useRouter()
const route = useRoute()

let handleLanguge = () => {
  langRef.value.open()
}
let connectWallet = () => {
  emit('connectWallet')
}
let navList = ref([
  {
    label: '首页',
    path: '/index'
  },
  {
    label: '我的社区',
    path: '/community'
  }
])

let links = ref([
  {
    icon: tg,
    link: ''
  },
  {
    icon: twitter,
    link: ''
  },
  {
    icon: github,
    link: ''
  }
])

const changeMeun = () => {
  show.value = !show.value
}
const handleClick = (item) => {
  if (route.path !== item.path) {
    router.push({ path: item.path })
  }
  changeMeun()
}
const toHome = () => {
  router.push({ path: '/index' })
  show.value = false
}
// 关闭结束
const handleClosed = () => {
  openOrCloseEnd.value = false
}
// 打开结束
const handleOpened = () => {
  openOrCloseEnd.value = true
}
</script>
<template>
  <nav :class="[showTips && !show ? 'mb-66' : '']">
    <div class="flex justify-between items-center w-100%">
      <div class="left flex items-center gap-26">
        <van-image width="34" height="34" :src="logo" @click="changeMeun" />
        <!-- <van-image width="22" height="22" :src="en" /> -->
      </div>
      <div class="right flex justify-between items-center">
        <div class="flex justify-center items-center" @click="handleLanguge">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="18"
            height="18"
            viewBox="0 0 37 37"
            fill="none"
          >
            <path
              d="M18.3333 36.6667C8.20783 36.6667 0 28.4588 0 18.3333C0 8.20783 8.20783 0 18.3333 0C28.4588 0 36.6667 8.20783 36.6667 18.3333C36.6667 28.4588 28.4588 36.6667 18.3333 36.6667ZM14.135 32.3895C12.3263 28.5529 11.2784 24.4021 11.0495 20.1667H3.78033C4.13707 22.988 5.30552 25.645 7.14371 27.8148C8.98189 29.9846 11.4107 31.5739 14.135 32.3895ZM14.7217 20.1667C14.9985 24.6382 16.2763 28.8383 18.3333 32.5453C20.4459 28.7403 21.68 24.5107 21.945 20.1667H14.7217ZM32.8863 20.1667H25.6172C25.3882 24.4021 24.3404 28.5529 22.5317 32.3895C25.256 31.5739 27.6848 29.9846 29.523 27.8148C31.3611 25.645 32.5296 22.988 32.8863 20.1667ZM3.78033 16.5H11.0495C11.2784 12.2646 12.3263 8.11376 14.135 4.27717C11.4107 5.09278 8.98189 6.68205 7.14371 8.85187C5.30552 11.0217 4.13707 13.6787 3.78033 16.5ZM14.7235 16.5H21.9432C21.6787 12.1561 20.4453 7.92648 18.3333 4.12133C16.2207 7.92632 14.9867 12.156 14.7217 16.5H14.7235ZM22.5317 4.27717C24.3404 8.11376 25.3882 12.2646 25.6172 16.5H32.8863C32.5296 13.6787 31.3611 11.0217 29.523 8.85187C27.6848 6.68205 25.256 5.09278 22.5317 4.27717Z"
              fill="white"
            />
          </svg>
        </div>
        <div
          class="border-[1px] border-[#F76938] border-solid rounded-[20px] py-16px px-32px text-[22px] text-[#FFFFFF] font-roboto font-400 ml-34 van-haptics-feedback"
          @click="connectWallet"
        >
          链接钱包
        </div>
      </div>
    </div>
    <!-- <div
      class="w-100%  h-66 absolute left-0 bottom-[-66px] bg-[#344D4A] pl-32px text-[#FFFFFF]/60 text-[24px] font-pingfang font-400 line-height-[66px]"
      v-show="!show ? (!openOrCloseEnd && showTips) : (!show && showTips)">CAW 0.0723045(-2.26%)VVS 0.05</div> -->
  </nav>
  <lang ref="langRef" />
  <van-popup
    v-model:show="show"
    z-index="9"
    :overlay="false"
    position="left"
    @closed="handleClosed"
    @opened="handleOpened"
  >
    <div class="nav_body">
      <div class="nav_list">
        <div
          class="nav_list_item"
          v-for="item in navList"
          :key="item.label"
          @click="handleClick(item)"
        >
          <div class="nav_list_item--label">{{ item.label }}</div>
          <div class="nav_list_item--icon flex items-center justify-center h-100%">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 32 32"
              fill="none"
            >
              <path
                d="M18.1826 16L8 6.66625L10.9087 4L24 16L10.9087 28L8 25.3338L18.1826 16Z"
                fill="#9DABC4"
              />
            </svg>
          </div>
        </div>
      </div>
      <!-- <div class="links flex items-center gap-38 pl-20px mt-78px">
        <div v-for="(link, index) in links" :key="index">
          <a :href="link.link">
            <van-image width="30" height="30" :src="link.icon"></van-image>
          </a>
        </div>
      </div> -->
    </div>
  </van-popup>
</template>

<style scoped lang="scss">
nav {
  position: relative !important;
  // top: 0;
  // left: 0;
  width: 100%;
  height: 146px;
  padding: 44px 30px;
  background-color: transparent;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 99;
  background-color: #011414;
  backdrop-filter: blur(10px);
  // margin-bottom: 66px;
}

.right {
  // position: absolute;
  // right: 0;
  // top: 0;
  // height: 100%;
  // border-radius: 0 0 0 5555px;
  // background: #FFF;
  // // padding-top: 20px;
  // padding-right: 18px;
  // // height: 48px;
}

.account {
  color: #000;
  text-align: center;
  font-family: MiSans;
  font-size: 12px;
  font-style: normal;
  font-weight: 630;
  line-height: normal;
  margin-left: 12px;
  margin-right: 20px;
}

.nav_btn {
  margin-left: 16px;
}

.nav_body {
  width: 100vw;
  height: 100vh;
  margin-top: auto;
  // background: radial-gradient(89.43% 47.97% at 50.13% 100%, #3e509c 0%, #03002c 62.5%);
  background: linear-gradient(173deg, #fafafc 5.44%, #e3e4ea 68.12%, #fff 95.98%);
  // padding-top: calc(var(--van-nav-bar-height) + 44px);
  padding-top: calc(146px + 72px);
}

.nav_list {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 56px;

  .nav_list_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;

    .nav_list_item--label {
      color: #000;
      font-family: MiSans;
      font-size: 36px;
      font-style: normal;
      font-weight: 520;
      line-height: normal;
    }

    .nav_list_item--icon {
      margin-left: 10px;
      // margin-top: -10px;
    }
  }
}

.border-c18 {
  border: 1px solid #00c18d;
}
</style>
